<template>
  <!-- 头部 开始 -->
  <div class="app-top">
    <div class="position-absolute h-100 ">
      <div class="h-100 app-top-top">
        <div style="height: 65.45%;top:10%" class="position-absolute w-100 flex flex-center">
          <div class="top-one">陇县奶山羊产业大数据服务平台</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 头部 结束 -->
</template>
<script>

export default {
  name: 'MyHeader'
}
</script>

<style scoped lang="scss">
// 头部css
.app-top {
  position: relative;
  width: 100%;
  height: 10.2%;
}
.bf-gg {
  background: url(~@/assets/sheep/bg.png) no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
}
.app-top-top {
  background: url(~@/assets/sheep/top-bg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.c-28C2FF {
  color: #28c2ff !important;
}
.itembox {
  margin: 0 auto;
  margin-top: -15px;
  width: 824px;
  height: 40px;
  background: linear-gradient(90deg, rgba(36, 58, 86, 0) 0%, rgba(21, 82, 119, 1) 50%, rgba(36, 58, 86, 0) 100%);
  border: 2px solid;
  border-image: linear-gradient(277deg, rgba(43, 114, 158, 0.15), rgba(65, 139, 184, 1), rgba(21, 82, 119, 0.13)) 2 2;
}
.top-one {
  text-align: center;
  font-family: myfont;
  color: rgba(255, 255, 255, 1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(104, 202, 255, 1) 100%);
  color: transparent;
  -webkit-background-clip: text;
  font-size: 32px;
  line-height: 42px;
}

.flex-center {
  justify-content: center;
}
.itembox-center {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 999;
}
</style>
